<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>

	   <script>
	   
		  function processDisplay(action) {
			  //alert('Action: ' + action);
     		document.getElementById("answercheckblock").innerHTML = '';
     		document.getElementById("displayblock").innerHTML = '';
		    var url = '/lwf/whatisthis.do?action=';
		    if(action == 'next') {
		       url = url + 'shownext';
		    }
		    else if(action == 'previous') {
		       url = url + 'showprevious';
		    }
		    else {
		       url = url + 'newdisplay';
		    }

//alert('1: ' + url);
            var wittype = getCheckedRadio("wittype");
//alert('2: ' + wittype);
		    if(wittype.length != 0) {
   		        url = url + '&wittype=' + wittype;
   		        retrieveURL(url, 'displayblock');
		    }
		    else {
		       alert('Please select the choice');
		    }
		  }
		  
		  function displayAnswer() {
		  	url = '/lwf/whatisthis.do?action=displayanswer';
		    retrieveURL(url, 'answercheckblock');
		  } 
		  
	   </script>

   <form name="whatisthis">
   <table border="0" align="center" width="100%" bordercolor="red"> 
       <tr>
           <td align="center">
               <table border="0" width="70%" class="radiotable">
                  <tr>
                     <td colspan="12" class="subtitle">
                         Select a category to identify items
                     </td>
                  </tr>
                  <tr>
                     <td colspan="12" class="subtitle">&nbsp;</td>
                  </tr>
                  <tr>
	                  <td width="3%"><input type="radio" value="animals" name="wittype" onclick="processDisplay('newdisplay')"/></td>
	                  <td width="8%" class="leftlabel">Animals</td>
	                  <td width="2%">&nbsp;</td>
	                  <td width="3%"><input type="radio" value="insects" name="wittype" onclick="processDisplay('newdisplay')"/></td>
	                  <td width="8%" class="leftlabel">Insects</td>
					  <td width="2%">&nbsp;</td>
	                  <td width="3%"><input type="radio" value="fruits" name="wittype" onclick="processDisplay('newdisplay')"/></td>
	                  <td width="8%" class="leftlabel">Fruits</td> 
	                  <td width="2%">&nbsp;</td>
	                  <td width="3%"><input type="radio" value="vegetables" name="wittype" onclick="processDisplay('newdisplay')"/></td>
	                  <td width="8%" class="leftlabel">Vegetables</td>
	                  <td width="2%">&nbsp;</td>
	                  <td width="3%"><input type="radio" value="birds" name="wittype" onclick="processDisplay('newdisplay')"/></td>
	                  <td width="8%" class="leftlabel">birds</td>
	                  <td width="2%">&nbsp;</td>
	                  <td width="3%"><input type="radio" value="seasons" name="wittype" onclick="processDisplay('newdisplay')"/></td>
	                  <td width="8%" class="leftlabel">seasons</td>
	                  <td width="24%" nowrap>&nbsp;</td>
	               </tr>
               </table>
           </td>
       </tr>         
       <tr>
           <td>
               <table border="0" width="100%">
                  <tr>
                      <td>
                         <span id="displayblock"></span>
                      </td>
                  </tr>                  
               </table>
           </td>
       </tr> 
   </table>  
</form>
